<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form
          ref="searchindexForm"
          :model="search"
          size="mini"
          label-width="90px"
          label-position="right">
          <!--        <el-form-item prop="dealerCode" label="代理商编码">-->
          <!--          <el-input v-model="search.dealerCode"    clearable/>-->
          <!--        </el-form-item>    -->
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dealerName" label="代理商" >
                <dealerSelect
                  ref="dealerSelect"
                  v-model="search.dealerName"
                  :dealer-name.sync="dealerName"
                  :dealer-dis.sync="dealerDis"
                  :dealer-code-in-name="search.dealerName"
                  style="width:160px"
                  clearable
                  @getDealerInfo="getDealerInfo"
                  @changeDE="changeDE" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="employeeNo" label="员工编号">
                <el-input v-model="search.employeeNo" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="userCode" label="账号">
                <el-input v-model="search.userCode" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="employeeName" label="姓名">
                <el-input v-model="search.employeeName" clearable/>
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchindexForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">账号信息</div>
          <div class="btnGroup">
            <el-button-group>
              <el-button type="primary" icon="el-icon-edit-outline" @click="editClick" >修改密码</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="restClick" >重置密码</el-button>
            </el-button-group>
          </div>
        </div>
        <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @selection-change="handleSelectionChange" >
          <el-table-column align="center" label="序号" width="50" type="index"/>
          <el-table-column type="selection" width="50"/>
          <el-table-column :show-overflow-tooltip="true" prop="DEALER_CODE" label="代理商编码" min-width="120"/>
          <el-table-column :show-overflow-tooltip="true" prop="DEALER_NAME" label="代理商名称" min-width="150"/>
          <el-table-column :formatter="filterCode" prop="DATA_TYPE" label="业务范围" min-width="150" type="4508"/>
          <el-table-column :show-overflow-tooltip="true" prop="EMPLOYEE_NO" label="员工编号" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="USER_CODE" label="账号" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="EMPLOYEE_NAME" label="姓名" min-width="150"/>
        </BaseTable>
      </div>
    </div>
    <el-dialog v-dialogDrag :title="'更改密码'" :visible.sync="dialogFormVisible" width="30%">
      <div class="elform">
        <el-form ref="addSearchForm" :inline="true" :model="addSearch" :rules="rules" size="mini" label-width="120px" >
          <el-form-item label="密码" prop="newPassword">
            <el-input v-model="addSearch.newPassword" type="password" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="addSearch.checkPass" type="password" auto-complete="off"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="text"><i class="el-icon-search magnifier"/></el-button>
        <el-button type="primary" @click="save">更改</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchUserInfos, editPassword, restPassword } from '@/api/admin/auth/gms/user'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
// import { exportFile } from '@/utils/index'
// import { mapGetters } from 'vuex'
import { passWD } from '@/utils/validator'
import dealerSelect from '@/views/admin/org/gms/dealerSelect'
import _ from 'lodash'
export default {
  name: 'GmsUserPDReset',
  components: {
    BaseTable,
    dealerSelect
  },
  mixins: [formMixins],
  data() {
    // 校验新密码
    const validateNewPassword = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请输入新密码'))
      } else {
        passWD(rule, value, callback)
      }
    }
    // 校验第二次和第一次输入的密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.addSearch.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        passWD(rule, value, callback)
      }
    }
    return {
      active: 1,
      multipleSelection: [],
      dealerDis: false,
      search: {
        limit: 10,
        pageNum: 1,
        order: 'desc',
        sort: 'DEALER_CODE',
        dealerName: '',
        employeeNo: '',
        userCode: '',
        employeeName: ''
      },
      dialogFormVisible: false,
      addSearch: {
        empIds: '',
        newPassword: '',
        checkPass: ''
      },
      rules: {
        newPassword: [{
          validator: validateNewPassword,
          trigger: 'blur',
          required: true
        }],
        checkPass: [{
          validator: validateConfirmPassword,
          trigger: 'blur',
          required: true
        }]
      }
    }
  },
  computed: {

  },
  mounted() {
    this.searchHandle()
  },

  methods: {
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      searchUserInfos(search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    getDealerInfo(val) {
      this.$set(this.search, 'dealerName', val.DEALER_NAME)
    },
    changeDE() {
      this.search.dealerName = ''
    },
    // 选择行数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 修改密码
    editClick() {
      if (this.multipleSelection.length !== 0) {
        let empIds = ''
        this.multipleSelection.forEach(item => {
          if (empIds === '') {
            empIds = item['EMP_ID']
          } else {
            empIds = empIds + ',' + item['EMP_ID']
          }
        })
        this.dialogFormVisible = true
        this.addSearch = {
          empIds: empIds,
          newPassword: '',
          checkPass: ''
        }
        this.$nextTick(() => {
          this.$refs.addSearchForm.clearValidate()
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择表格数据'
        })
      }
    },
    // 重置密码
    restClick() {
      if (this.multipleSelection.length !== 0) {
        let empIds = ''
        this.multipleSelection.forEach(item => {
          if (empIds === '') {
            empIds = item['EMP_ID']
          } else {
            empIds = empIds + ',' + item['EMP_ID']
          }
        })
        const param = {
          empIds: empIds,
          newPassword: 'SHANTUI123456'
        }
        restPassword(param)
          .then(() => {
            this.$message({
              type: 'success',
              message: '重置密码成功!'
            })
          }).catch(err => {

          })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择表格数据'
        })
      }
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
    },
    // 保存
    save() {
      this.$refs['addSearchForm'].validate(valid => {
        if (valid) {
          const param = {
            empIds: this.addSearch.empIds,
            newPassword: this.addSearch.newPassword
          }
          editPassword(param)
            .then(() => {
              this.$message({
                type: 'success',
                message: '修改密码成功!'
              })
              this.dialogFormVisible = false
            }).catch(err => {

            })
        }
      })
    }

  }
}
</script>

<style scoped>
.dialog-form {
  width: 100%;
  margin: 0;
}
.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}

</style>
